<template>
    <div class="select-type">
        <cube-scroll-nav-bar
                id="select-type"
                :current='current'
                :labels="labels"
                @change="change" />
    </div>
</template>

<script>
import { mapState } from "vuex"
export default {
    name: "select-type",
    data () {
        return {
            current: '代金券'
        }
    },
    props: {
        index: {
            type: Number,
            default: 0
        }
    },
    watch: {
      index () {
          this.current = this.labels[this.index]
      }
    },
    computed: {
        ...mapState({
            labels: "coupon_labels",
            value: "coupon_value"
        })
    },
    mounted() {
        this.$emit("loaded", this.value)
    },
    methods: {
        /**
         * nav改变
         * @param value
         */
        change(value) {
            for(let i=0;i<this.labels.length;i++){
                if(value === this.labels[i]) {
                    this.$emit("change", i)
                    break;
                }
            }
        }
    }
}
</script>

<style scoped lang="less" src="./select-type.less"></style>
